function refresh(){
    var myDate = new Date();
    if(myDate.getHours()==8 && myDate.getMinutes()==10 && myDate.getSeconds()==0){
        indexJs()
    }
}
setInterval(refresh,1000)
function indexJs(){
    // 客运线路强度图表
    $.ajax({
        type: "get",
        async: false, //异步执行
        url:'/getPassengerTransportIntensityInfo',
        dataType: "json", //返回数据形式为json
        success: function (data) {
            if (data.type=='success'){
                plantCap = data.data.ptiMap.ptiList;
                $('.keyun_average').text((data.data.ptiMap.lineAverage).toFixed(2));
            }else {
                alert(data.message);
            }
        },
        error: function (errorMsg) {
            console.log("请求数据失败");
        },
    });
}
indexJs();

// 正点率数据
var zhengdianRateData = [
    {
        num: "99.31%",
        line: "1号线"
    },
    {
        num: "99.8%",
        line: "2号线"
    },
    {
        num: "99.29%",
        line: "3号线"
    },
    {
        num: "99.47%",
        line: "4号线"
    },
    {
        num: "99.99%",
        line: "5号线"
    },
    {
        num: "100%",
        line: "6号线"
    },
    {
        num: "99.81%",
        line: "7号线"
    },
    {
        num: "99.72%",
        line: "8号线"
    },
    {
        num: "99.79%",
        line: "9号线"
    },
    {
        num: "99.85%",
        line: "10号线"
    },
    {
        num: "99.68%",
        line: "11号线"
    },
    {
        num: "99.93%",
        line: "12号线"
    },
    {
        num: "99.93%",
        line: "13号线"
    },
    {
        num: "99.64%",
        line: "16号线"
    },
    {
        num: "99.94%",
        line: "17号线"
    },
 //   {
 //       num: "99.97%",
 //       line: "浦江线"
 //   },
]
for (let i = 0; i < zhengdianRateData.length; i++) {
    const element = zhengdianRateData[i];
    var zhengdianHtml = "<div class='zhengdian_every'><p class='zhengdian_num'>"+element.num+"</p><p class='zhengdian_line'>"+element.line+"</p></div>"
    $(".zhengdian_box").append(zhengdianHtml)
}

// 兑现率数据
var duixianRateData = [
    {
        num: "99.68%",
        line: "1号线"
    },
    {
        num: "99.81%",
        line: "2号线"
    },
    {
        num: "99.71%",
        line: "3号线"
    },
    {
        num: "99.76%",
        line: "4号线"
    },
    {
        num: "100%",
        line: "5号线"
    },
    {
        num: "99.93%",
        line: "6号线"
    },
    {
        num: "99.97%",
        line: "7号线"
    },
    {
        num: "99.90%",
        line: "8号线"
    },
    {
        num: "99.84%",
        line: "9号线"
    },
    {
        num: "99.99%",
        line: "10号线"
    },
    {
        num: "99.82%",
        line: "11号线"
    },
    {
        num: "99.98%",
        line: "12号线"
    },
    {
        num: "99.97%",
        line: "13号线"
    },
    {
        num: "100%",
        line: "16号线"
    },
    {
        num: "99.90%",
        line: "17号线"
    },
//    {
//        num: "99.97%",
//        line: "浦江线"
//    },
]
for (let i = 0; i < duixianRateData.length; i++) {
    const element = duixianRateData[i];
    var zhengdianHtml = "<div class='duixian_every'><p class='duixian_num'>"+element.num+"</p><p class='duixian_line'>"+element.line+"</p></div>"
    $(".duixian_box").append(zhengdianHtml)
}

// 客运线路强度图表
keyunChart()
function keyunChart(){
    let myChart = echarts.init(document.getElementById('keyun_chart'));

    // let plantCap = [{
    //     name: '1号线',
    //     value: '2.979'
    // }, {
    //     name: '2号线',
    //     value: '2.269'
    // }, {
    //     name: '3号线',
    //     value: '1.152'
    // }, {
    //     name: '4号线',
    //     value: '2.249'
    // }, {
    //     name: '5号线',
    //     value: '0.529'
    // }, {
    //     name: '6号线',
    //     value: '1.295'
    // }, {
    //     name: '7号线',
    //     value: '1.713'
    // }, {
    //     name: '8号线',
    //     value: '2.595'
    // }, {
    //     name: '9号线',
    //     value: '1.584'
    // }, {
    //     name: '10号线',
    //     value: '2.255'
    // }, {
    //     name: '11号线',
    //     value: '0.992'
    // }, {
    //     name: '12号线',
    //     value: '1.639'
    // }, {
    //     name: '13号线',
    //     value: '1.612'
    // }, {
    //     name: '16号线',
    //     value: '0.329'
    // }, {
    //     name: '17号线',
    //     value: '0.440'
    // }, {
    //     name: '浦江线',
    //     value: '0.564'
    // }];

    let datalist = [{
        offset: [50, 50],
        symbolSize: 80,
        opacity: .95,
        color: 'rgba(104,184,55, 1)'
    },  {
        offset: [20, 50],
        symbolSize: 70,
        opacity: .84,
        color: 'rgba(104,184,55, 0.95)'
    }, {
        offset: [80, 20],
        symbolSize: 35,
        opacity: .8,
        color: 'rgba(104,184,55, 0.95)'
    }, {
        offset: [36, 20],
        symbolSize: 65,
        opacity: .75,
        color: 'rgba(104,184,55, 0.90)'
    }, {
        offset: [95,40],
        symbolSize: 40,
        opacity: .7,
        color: 'rgba(104,184,55, 0.90)'
    }, {
        offset: [0, 35],
        symbolSize: 40,
        opacity: .68,
        color: 'rgba(104,184,55, 0.85)'
    }, {
        offset: [75, 45],
        symbolSize: 60,
        opacity: .7,
        color: 'rgba(104,184,55, 0.80)'
    },{
        offset: [35, 78],
        symbolSize: 80,
        opacity: .88,
        color: 'rgba(104,184,55, 0.95)'
    },{
        offset: [15, 20],
        symbolSize: 45,
        opacity: .88,
        color: 'rgba(104,184,55, 0.95)'
    },{
        offset: [70,75],
        symbolSize: 70,
        opacity: .88,
        color: 'rgba(104,184,55, 0.95)'
    },{
        offset: [53, 90],
        symbolSize: 40,
        opacity: .88,
        color: 'rgba(104,184,55, 0.95)'
    },{
        offset: [60, 20],
        symbolSize: 55,
        opacity: .88,
        color: 'rgba(104,184,55, 0.95)'
    },{
        offset: [5, 75],
        symbolSize: 50,
        opacity: .88,
        color: 'rgba(104,184,55, 0.95)'
    },{
        offset: [95, 15],
        symbolSize: 45,
        opacity: .88,
        color: 'rgba(104,184,55, 0.95)'
    },{
        offset: [95, 85],
        symbolSize: 30,
        opacity: .88,
        color: 'rgba(104,184,55, 0.95)'
    },{
        offset: [90, 62],
        symbolSize: 35,
        opacity: .88,
        color: 'rgba(104,184,55, 0.95)'
    }];
    let datas = [];
    var scale = 1;
    reSize(plantCap,datalist);
    function reSize(listSy,dataList){//通过值来改变球的大小
        var maxArr = [];
        listSy.forEach(function(item){
            maxArr.push(item.pti)
        })
        var strMax = maxArr.sort(function(a,b){
            return b-a;
        });
        var maxNum = strMax[0];//获取最大值
        dataList.forEach(function(item,index){
            item.symbolSize = listSy[index].pti/maxNum*100;
            if (item.symbolSize < 50){
                item.symbolSize = 50
            }
            if(item.symbolSize> 80){
                item.symbolSize = 80
            }
        })
    }

    for (let i = 0; i < plantCap.length; i++) {
        let item = plantCap[i];
        let itemToStyle = datalist[i];
        item.pti = Number(item.pti).toFixed(2);
        datas.push({
            name: item.pti + '\n' + item.lineName,
            value: itemToStyle.offset,
            symbolSize: itemToStyle.symbolSize*scale,
            // symbolSize: itemToStyle.symbolSize,
            label: {
                normal: {
                    textStyle: {
                        fontSize: 14,
                        color:'#fff'
                    }
                }
            },
            itemStyle: {
                normal: {
                    color: itemToStyle.color,
                    opacity: itemToStyle.opacity
                }
            },
        })
    }
    option = {
        tooltip: {
            formatter: '{b}'
        },
        grid: {
            show: false,
            top: 10,
            bottom: 0
        },
        xAxis: [{
            gridIndex: 0,
            type: 'value',
            show: false,
            min: 0,
            max: 100,
            nameLocation: 'middle',
            nameGap: 5
        }],
        yAxis: [{
            gridIndex: 0,
            min: 0,
            show: false,
            max: 100,
            nameLocation: 'middle',
            nameGap: 30
        }],
        series: [{
            type: 'scatter',
            symbol: 'circle',
            symbolSize: 120,
            label: {
                normal: {
                    show: true,
                    formatter: '{b}',
                    color: '#fff',
                    textStyle: {
                        fontSize: '20'
                    }
                },
            },
            itemStyle: {
                normal: {
                    borderWidth: '4',
                    borderType: 'solid',
                    borderColor: '#fff',
                    color: '#68b837',
                    shadowColor: '#68b837',
                    shadowBlur: 10
                }
            },
            data: datas
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

// 线路平均运距图表
lineChart()
function lineChart(){
    let myChart = echarts.init(document.getElementById('line_chart'));
    let index = 0;
    let colorList = ['#f36c6c', '#e6cf4e', '#20d180', '#0093ff'];
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            show: false
        },
        grid: {
            left: 100,
            right: 30,
            top: 10,
            bottom: 10
        },
        xAxis: {
            type: 'value',
    
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            }
    
        },
        yAxis: {
            type: 'category',
            inverse: true,
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisPointer: {
                label: {
                    show: true,
                    margin: 18
                }
            },
            data: ['16号线','11号线','17号线','9号线','5号线','2号线', '3号线', '1号线', '7号线', '8号线', '10号线','13号线','12号线','6号线','4号线','浦江线'],
            axisLabel: {
                margin: 90,
                fontSize: 12,
                interval: 0,
                align: 'left',
                color: '#fff',
                rich: {
                    a1: {
                        color: '#fff',
                        backgroundColor: colorList[0],
                        width: 14,
                        height: 14,
                        align: 'center',
                        borderRadius: 2
                    },
                    a2: {
                        color: '#fff',
                        backgroundColor: colorList[1],
                        width: 14,
                        height: 14,
                        align: 'center',
                        borderRadius: 2
                    },
                    a3: {
                        color: '#fff',
                        backgroundColor: colorList[2],
                        width: 14,
                        height: 14,
                        align: 'center',
                        borderRadius: 2
                    },
                    b: {
                        color: '#fff',
                        backgroundColor: colorList[3],
                        width: 14,
                        height: 14,
                        align: 'center',
                        borderRadius: 2
                    }
                },
                formatter: function(params) {
                    if (index == 16) {
                        index = 0;
                    }
                    index++;
                    if (index - 1 < 3) {
                        return [
                            '{a' + index + '|' + index + '}' + '  ' + params
                        ].join('\n')
                    } else {
                        return [
                            '{b|' + index + '}' + '  ' + params
                        ].join('\n')
                    }
                }
            }
        },
        series: [{
                z: 2,
                name: 'value',
                type: 'bar',
                data: [22.33,14.14,13.88,11.54,10.64,9.12,8.87,8.83,8.69,7.58,7.37,6.97,6.47,6.32,5.73,4.42].map((item, i) => {
                    itemStyle = {
                        color: i > 3 ? colorList[3] : colorList[i]
                    }
                    return {
                        value: item,
                        itemStyle: itemStyle
                    };
                }),
                label: {
                    show: true,
                    position: 'right',
                    color: '#fff',
                    fontSize: 14,
                    offset: [10, 0]
                }
            }
    
        ]
    };
    myChart.setOption(option);
}

// 五分钟延误事件频次
yanwuChart()
function yanwuChart(){
    var myChart = echarts.init(document.getElementById('yanwu_chart'));
    option = {
        color: ['#1C86F1'],
        legend: {
            textStyle:{
                color: '#eeeeee'
            },
            right: 37,
            top: 22,
        },
        grid: {
            left: 60,
            right: 10,
            top: 40,
            bottom: 40
        },
        tooltip: {},
        xAxis: {
            type: 'category',
            data: ['1号线','2号线','3号线','4号线','5号线','6号线','7号线','8号线','9号线','10号线','11号线','12号线','13号线','16号线','17号线'],
            axisLine: {
                lineStyle:{
                    color: '#657CA8'
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#fff',
                rotate: 45,
                fontSize: 12
            },
        },
        yAxis: {
            type: 'value',
            name: '万车公里/件',
            nameTextStyle: {
                fontSize: 12
            },
            axisLine: {
                lineStyle: {
                    color: '#fff',
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                color: '#fff',
                fontSize: 12
            },
        },
        series: [
            {
                type: 'bar',
                barWidth: 20,
                data: [98266.44,229559.168,59342.394,66252.99,65233.896,59491.56,127385.028,135748.21,193072.386,103260.108,200935.104,98978.028,105651.024,90735.171,64508.22],
                label: {
                    show: false,
                    position: 'top',
                    textStyle: {
                        color: '#ffffff'
                    }
                }
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

// 票务收入变化趋势图
changeChart()
function changeChart(){
    var myChart = echarts.init(document.getElementById('changeChart'));
    let color = [
        "#0090FF",
        "#36CE9E",
        "#FFC005",
        "#FF515A",
        "#8B5CFF",
        "#00CA69"
    ];
    let echartData = [{
            name: "07-14",
            value1: 2943.67,
            value2: 2421.1
        },
        {
            name: "07-15",
            value1: 2922.81,
            value2: 2255.57
        },
        {
            name: "07-16",
            value1: 2910.82,
            value2: 2393.1
        },
        {
            name: "07-17",
            value1: 2861.92,
            value2: 2419.13
        },
        {
            name: "07-18",
            value1: 2944.82,
            value2: 1671.74
        },
        {
            name: "07-19",
            value1: 2166.39,
            value2: 1431.97
        },
        {
            name: "07-20",
            value1: 1927.27,
            value2: 2405.46
        }
    ];

    let xAxisData = echartData.map(v => v.name);
    //  ["1", "2", "3", "4", "5", "6", "7", "8"]
    let yAxisData1 = echartData.map(v => v.value1);
    // [100, 138, 350, 173, 180, 150, 180, 230]
    let yAxisData2 = echartData.map(v => v.value2);
    // [233, 233, 200, 180, 199, 233, 210, 180]
    const hexToRgba = (hex, opacity) => {
        let rgbaColor = "";
        let reg = /^#[\da-f]{6}$/i;
        if (reg.test(hex)) {
            rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
        "0x" + hex.slice(3, 5)
        )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
        }
        return rgbaColor;
    }

    option = {
        color: color,
        legend: {
            right: 10,
            top: 10,
            textStyle: {
                color: "#fff",
                fontSize: 12
            }
        },
        tooltip: {
            trigger: "axis",
            formatter: function(params) {
                let html = '';
                params.forEach(v => {
                    console.log(v)
                    html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                    <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
                    ${v.seriesName}.${v.name}
                    <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
                    万元`;
                });

                return html
            },
            extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
            axisPointer: {
                type: 'shadow',
                shadowStyle: {
                    color: '#ffffff',
                    shadowColor: 'rgba(225,225,225,1)',
                    shadowBlur: 5
                }
            }
        },
        grid: {
            left: "2%",
            top: "20%",
            right: "6%",
            bottom: "5%",
            containLabel: true
        },
        xAxis: [{
            type: "category",
            boundaryGap: false,
            axisLabel: {
                //formatter: '{value}月',
                textStyle: {
                    color: "#fff",
                    fontSize: 12
                },
                margin: 15
            },
            axisLine: {
                lineStyle: {
                    color: "#D9D9D9"
                }
            },
            data: xAxisData
        }],
        yAxis: [{
            type: "value",
            name: '单位：万元',
            axisLabel: {
                textStyle: {
                    color: "#fff",
                    fontSize: 12
                }
            },
            nameTextStyle: {
                color: "#fff",
                fontSize: 12,
                lineHeight: 40
            },
            splitLine: {
                lineStyle: {
                    type: "dashed",
                    color: "#E9E9E9"
                }
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            }
        }],
        series: [{
            name: "2019",
            type: "line",
            smooth: true,
            // showSymbol: false,/
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
                normal: {
                    color: color[0],
                    shadowBlur: 3,
                    shadowColor: hexToRgba(color[0], 0.5),
                    shadowOffsetY: 8
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [{
                                offset: 0,
                                color: hexToRgba(color[0], 0.3)
                            },
                            {
                                offset: 1,
                                color: hexToRgba(color[0], 0.1)
                            }
                        ],
                        false
                    ),
                    shadowColor: hexToRgba(color[0], 0.1),
                    shadowBlur: 10
                }
            },
            data: yAxisData1
        }, {
            name: "2020",
            type: "line",
            smooth: true,
            // showSymbol: false,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
                normal: {
                    color: color[1],
                    shadowBlur: 3,
                    shadowColor: hexToRgba(color[1], 0.5),
                    shadowOffsetY: 8
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [{
                                offset: 0,
                                color: hexToRgba(color[1], 0.3)
                            },
                            {
                                offset: 1,
                                color: hexToRgba(color[1], 0.1)
                            }
                        ],
                        false
                    ),
                    shadowColor: hexToRgba(color[1], 0.1),
                    shadowBlur: 10
                }
            },
            data: yAxisData2
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

// 施工兑现率图表
shigongDChart()
function shigongDChart(){
    var myChart = echarts.init(document.getElementById('shigongDChart'));
    var colors = ["#2E9AFE", "#FF8000", "#A4A4A4", "#F7D358"],
    option = {
        color: colors,
        tooltip: {
            trigger: "axis",
            formatter: function(params){
                var res = params[0].name
                for (let i = 0; i < params.length; i++) {
                    const element = params[i];
                    res += "<br/><div style='width: 10px;height: 10px;border-radius: 50%;background: "+colors[i]+";display: inline-block'></div> "+element.seriesName+": "+element.value+"%"
                }
                return res;
            }
        },
        legend: {
            data: ["保护区", "车场", "车站", "执行区"],
            top: "92%",
            textStyle: {
                color: "#fff",
                fontSize: 12
            }
        },
        grid: {
            top: "8%",
            left: "3%",
            right: "4%",
            bottom: "10%",
            containLabel: true
        },
        yAxis: [{
            name: '',
            type: 'value',
            max: 100,    //设置最大值
            min: 0,      //最小值
            splitNumber: 11, //11个刻度线，也就是10等分
            axisLabel: {  
                show: true,  
                interval: 'auto',  
                formatter: '{value}.00 %',
                color: '#fff',
                fontSize: 12
            },  
            show: true,
            axisLine: {show:false}  
        }],
        xAxis: [{
            type: "category",
            data: ["7-11", "7-12", "7-13", "7-14", "7-15", "7-16"],
            axisLabel: {
                color: '#fff',
                fontSize: 12,
                margin: 15
            },
            axisLine: {
                lineStyle: {
                    color: '#CCCCCC'
                }
            }  
        }],
        series: [{
            name: "保护区",
            type: "line",
            barWidth: "20px",
            data: [100,100,100,23.81,0,20],
            lineStyle: {
                normal: {
                    width: 4
                }
                
            }
        }, {
            name: "车场",
            type: "line",
            barWidth: "20px",
            data: [96.36,96.36,95.93,96.41,95.67,94.99],
            lineStyle: {
                normal: {
                    width: 4
                }
                
            }
        }, {
            name: "车站",
            type: "line",
            barWidth: "20px",
            data: [54,49.56,54.84,49.20,44.32,37.33],
            lineStyle: {
                normal: {
                    width: 4
                }
                
            }
        }, {
            name: "执行区",
            type: "line",
            barWidth: "20px",
            data: [99.70,99.31,99.30,99.03,99.02,99.15],
            lineStyle: {
                normal: {
                    width: 4
                }
                
            }
        }]
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

// 施工计划工时利用率
shigongPChart()
function shigongPChart(){
    var myChart = echarts.init(document.getElementById('shigongPChart'));
    var colors = ["#2E9AFE", "#FF8000", "#A4A4A4", "#F7D358"],
    option = {
        color: colors,
        tooltip: {
            trigger: "axis",
            formatter: function(params){
                var res = params[0].name
                for (let i = 0; i < params.length; i++) {
                    const element = params[i];
                    res += "<br/><div style='width: 10px;height: 10px;border-radius: 50%;background: "+colors[i]+";display: inline-block'></div> "+element.seriesName+": "+element.value+"%"
                }
                return res;
            }
        },
        legend: {
            data: ["保护区", "车场", "车站", "执行区"],
            top: "92%",
            textStyle: {
                color: "#fff",
                fontSize: 12
            }
        },
        grid: {
            top: "8%",
            left: "3%",
            right: "4%",
            bottom: "10%",
            containLabel: true
        },
        yAxis: [{
            name: '',
            type: 'value',
            max: 100,    //设置最大值
            min: 0,      //最小值
            splitNumber: 11, //11个刻度线，也就是10等分
            axisLabel: {  
                show: true,  
                interval: 'auto',  
                formatter: '{value}.00 %',
                color: '#fff',
                fontSize: 12
            },  
            show: true,
            axisLine: {show:false}  
        }],
        xAxis: [{
            "type": "category",
            "data": ["7-11", "7-12", "7-13", "7-14", "7-15", "7-16"],
            axisLabel: {
                color: '#fff',
                fontSize: 12,
                margin: 15
            },
            axisLine: {
                lineStyle: {
                    color: '#CCCCCC'
                }
            }  
        }],
        series: [{
            name: "保护区",
            type: "line",
            barWidth: "20px",
            data: [100,0,0,27.43,100,19.89],
            lineStyle: {
                normal: {
                    width: 4
                }
                
            }
        }, {
            name: "车场",
            type: "line",
            barWidth: "20px",
            data: [71.51,72.26,72.41,70.67,72.15,72.22],
            lineStyle: {
                normal: {
                    width: 4
                }
                
            }
        }, {
            name: "车站",
            type: "line",
            barWidth: "20px",
            data: [43.66,37.52,43.26,47.84,47.24,42.67],
            lineStyle: {
                normal: {
                    width: 4
                }
                
            }
        }, {
            name: "执行区",
            type: "line",
            barWidth: "20px",
            data: [88.50,90.10,87.64,90.83,93.10,93.91],
            lineStyle: {
                normal: {
                    width: 4
                }
                
            }
        }]
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

// 施工变更率图表
shigongCChart()
function shigongCChart(){
    var myChart = echarts.init(document.getElementById('shigongCChart'));
    var colors = ["#2E9AFE", "#FF8000", "#A4A4A4", "#F7D358"],
    option = {
        color: colors,
        tooltip: {
            "trigger": "axis",
            formatter: function(params){
                var res = params[0].name
                for (let i = 0; i < params.length; i++) {
                    const element = params[i];
                    res += "<br/><div style='width: 10px;height: 10px;border-radius: 50%;background: "+colors[i]+";display: inline-block'></div> "+element.seriesName+": "+element.value+"%"
                }
                return res;
            }
        },
        legend: {
            data: ["保护区", "车场", "车站", "执行区"],
            top: "92%",
            textStyle: {
                color: "#fff",
                fontSize: 12
            }
        },
        grid: {
            top: "8%",
            left: "3%",
            right: "4%",
            bottom: "10%",
            containLabel: true
        },
        yAxis: [{
            name: '',
            type: 'value',
            max: 4,    //设置最大值
            min: 0,      //最小值
            // splitNumber: 10,
            // boundaryGap:[0,1], 
            axisLabel: {  
                show: true,  
                interval: 'auto',  
                formatter: '{value}%',
                color: '#fff',
                fontSize: 12
            },
            // show: true,
            axisLine: {show:false} 
        }],
        xAxis: [{
            type: "category",
            data: ["7-11", "7-12", "7-13", "7-14", "7-15", "7-16"],
            axisLabel: {
                color: '#fff',
                fontSize: 12,
                margin: 15
            },
            axisLine: {
                lineStyle: {
                    color: '#CCCCCC'
                }
               
            }
        }],
        series: [{
            name: "保护区",
            type: "line",
            barWidth: "20px",
            data: [0,0,0,0,0,0],
            lineStyle: {
                normal: {
                    width: 4
                }
                
            }
        }, {
            name: "车场",
            type: "line",
            barWidth: "20px",
            data: [1.02,1.36,0.66,1.01,0.80,1.34],
            lineStyle: {
                normal: {
                    width: 4
                }
                
            }
        }, {
            name: "车站",
            type: "line",
            barWidth: "20px",
            data: [1.33,1.93,1.81,2.55,2.57,2.02],
            lineStyle: {
                normal: {
                    width: 4
                }
                
            }
        }, {
            name: "执行区",
            type: "line",
            barWidth: "20px",
            data: [3.65,1.39,1.75,1.75,1.47,1.02],
            lineStyle: {
                normal: {
                    width: 4
                }
                
            }
        }]
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

// 进度完成情况
jinduChart()
function jinduChart(){
    var myChart = echarts.init(document.getElementById('jinduChart'));
    var chartData = [0.82, 1.00, 0.50, 6.72];
    var chartData2 = [0.82, 1.01, 0.5375, 7.7];
    var chartData3 = [1.01, 1.01, 1.08, 1.15];
        option = {
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "shadow",
                label: {
                    show: true
                }
            }
        },
        grid: {
            left: "10%",
            top: "10%",
            right: "10%",
            bottom: "20%"
        },
        legend: {
            data: ["计划量", "完成量", "完成率"],
            top: "92%",
            textStyle: {
                color: "#fff",
                fontSize: 12
            }
        },
        xAxis: {
            data: [
                "10号线二期",
                "14号线",
                "15号线",
                "18号线"
            ],
            axisLine: {
                show: true, //隐藏X轴轴线
                lineStyle: {
                    color: "#A1A1A1",
                    width: 1
                }
            },
            axisTick: {
                show: true, //隐藏X轴刻度
                alignWithLabel: true
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: "#fff", //X轴文字颜色
                    fontSize: 12
                },
                margin: 10,
                interval: 0,
                rotate: 0
            }
        },
        yAxis: [{
                type: "value",
                name: "",
                nameTextStyle: {
                    color: "#A1A1A1",
                    fontSize: 12
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        width: 2,
                        color: "#A1A1A1"
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "#fff",
                        fontSize: 12
                    },
                    formatter: function(value,index) {
                            return value.toFixed(2) ;
                    }
                }
            },
            {
                type: "value",
                name: "",
                nameTextStyle: {
                    color: "#A1A1A1",
                    fontSize: 12
                },
                position: "right",
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#A1A1A1",
                        width: 2
                    }
                },
                axisLabel: {
                    show: true,
                    formatter: function(value,index) {
                            return value.toFixed(2) ;
                    },
                    textStyle: {
                        color: "#fff",
                        fontSize: 12
                    }
                }
            }
        ],
        series: [{
                name: "计划量",
                type: "bar",
                barWidth: 30,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: "#5B9BD5"
                            },
                            {
                                offset: 1,
                                color: "#5B9BD5"
                            }
                        ])
                    }
                },
                data: chartData
            },
            {
                name: "完成量",
                type: "bar",
                barWidth: 30,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: "#ED7D31"
                            },
                            {
                                offset: 1,
                                color: "#ED7D31"
                            }
                        ])
                    }
                },
                data: chartData2
            },
            {
                name: "完成率",
                type: "line",
                yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                showAllSymbol: true, //显示所有图形。
                symbol: "circle", //标记的图形为实心圆
                symbolSize: 6, //标记的大小
                itemStyle: {
                    //折线拐点标志的样式
                    color: "#26D9FF",
                    borderColor: "#A1A1A1",
                    width: 2,
                    shadowColor: "#A1A1A1",
                    shadowBlur: 2
                },
                lineStyle: {
                    color: "#A1A1A1",
                    width: 2,
                    shadowBlur: 2
                },
                data: chartData3
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

// 质量检查完成情况
zhiliangChart()
function zhiliangChart(){
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('zhiliangChart'));
    var chartData = [24, 24, 24, 24];
    var chartData2 = [40, 50, 48, 65];
    var chartData3 = [83, 104, 100, 104];
    option = option = {
        backgroundColor:"",
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "shadow",
                label: {
                    show: true
                }
            }
        },
        grid: {
            left: "10%",
            top: "10%",
            right: "13%",
            bottom: "20%"
        },
        legend: {
            data: ["计划完成量", "实际完成量", "指标值"],
            top: "92%",
            textStyle: {
                color: "#fff",
                fontSize: 12
            }
        },
        xAxis: {
            data: [
                "10号线二期",
                "14号线",
                "15号线",
                "18号线"
            ],
            axisLine: {
                show: true, //隐藏X轴轴线
                lineStyle: {
                    color: "#A1A1A1",
                    width: 1
                }
            },
            axisTick: {
                show: true, //隐藏X轴刻度
                alignWithLabel: true
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: "#fff", //X轴文字颜色
                    fontSize: 12
                },
                interval: 0,
                rotate: 0,
                margin: 10
            }
        },
        yAxis: [{
                type: "value",
                name: "",
                nameTextStyle: {
                    color: "#A1A1A1",
                    fontSize: 12
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        width: 2,
                        color: "#A1A1A1"
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "#fff",
                        fontSize: 12
                    }
                }
            },
            {
                type: "value",
                name: "",
                nameTextStyle: {
                    color: "#A1A1A1",
                    fontSize: 12
                },
                position: "right",
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#A1A1A1",
                        width: 2
                    }
                },
                axisLabel: {
                    show: true,
                    formatter: "{value} %", //右侧Y轴文字显示
                    textStyle: {
                        color: "#fff",
                        fontSize: 12
                    }
                }
            }
        ],
        series: [{
                name: "计划完成量",
                type: "bar",
                barWidth: 30,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: "#5B9BD5"
                            },
                            {
                                offset: 1,
                                color: "#5B9BD5"
                            }
                        ])
                    }
                },
                data: chartData
            },
            {
                name: "实际完成量",
                type: "bar",
                barWidth: 30,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: "#ED7D31"
                            },
                            {
                                offset: 1,
                                color: "#ED7D31"
                            }
                        ])
                    }
                },
                data: chartData2
            },
            {
                name: "指标值",
                type: "line",
                yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                showAllSymbol: true, //显示所有图形。
                symbol: "circle", //标记的图形为实心圆
                symbolSize: 6, //标记的大小
                itemStyle: {
                    //折线拐点标志的样式
                    color: "#26D9FF",
                    borderColor: "#A1A1A1",
                    width: 2,
                    shadowColor: "#A1A1A1",
                    shadowBlur: 2
                },
                lineStyle: {
                    color: "#A1A1A1",
                    width: 2,
                    shadowBlur: 2
                },
                data: chartData3
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

// 投资完成率
touziChart()
function touziChart(){
    var myChart = echarts.init(document.getElementById('touziChart'));
    var fourPieData = [
        {
            name: '10号线二期',
            max:100,
            value: 64.87
        },{
            name: '14号线',
            max:100,
            value: 50.40
        },{
            name: '15号线',
            max:100,
            value: 57.66
        },{
            name: '18号线',
            max:100,
            value: 64.89
        }
    ];
    
    var titleArr= [], seriesArr=[];
    colors=[['#57bbf7', '#f4f4f7'],['#ffc969', '#f4f4f7'],['#f38b97', '#f4f4f7'], ['#b1d882', '#f4f4f7'],['#c0acf9', '#f4f4f7']]
    fourPieData.forEach(function(item, index){
        titleArr.push(
            {
                text:item.name,
                left:index < 2 ? index * 50 + 25 +'%' :  index * 50  -75  +'%',
                top: index < 2 ? "40%"  :  "90%",
                textAlign: 'center',
                textStyle: {
                    fontWeight: 'normal',
                    fontSize: '18',
                    color: colors[index][0],
                    textAlign: 'center',
                },
            }        
        );
        seriesArr.push(
            {
                name: item.name,
                type: 'pie',
                clockWise: false,
                radius: [30, 38],
                itemStyle:  {
                    normal: {
                        color: colors[index][0],
                        shadowColor: colors[index][0],
                        shadowBlur: 0,
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        },
                    }
                },
                hoverAnimation: false,
                center: [index < 2 ? index * 50 + 25 +'%' :  index * 50 - 75  +'%', index < 2 ? "22%" :  "72%"],
                data: [{
                    value: item.value,
                    label: {
                        normal: {
                            formatter: function(params){
                                return params.value + '%';
                            },
                            position: 'center',
                            show: true,
                            textStyle: {
                                fontSize: '14',
                                fontWeight: 'bold',
                                color: colors[index][0]  //跟随其他颜色
                            }
                        }
                    },
                }, {
                    value: item.max-item.value,
                    name: 'invisible',
                    itemStyle: {
                        normal: {
                            color: colors[index][1]
                        },
                        emphasis: {
                            color: colors[index][1]
                        }
                    }
                }]
            }    
        )
    });
    var option = {
        title:titleArr,
        series: seriesArr
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}